import { ref, onMounted } from 'vue'

/**
 * 页面过渡动画 Composable
 * 用于控制页面加载时的动画效果
 */
export function usePageTransition(delay = 100) {
  const isPageReady = ref(false)
  const isAnimating = ref(false)
  
  onMounted(() => {
    // 页面加载完成后触发动画
    setTimeout(() => {
      isPageReady.value = true
    }, delay)
  })
  
  const startAnimation = () => {
    isAnimating.value = true
  }
  
  const endAnimation = () => {
    isAnimating.value = false
  }
  
  return {
    isPageReady,
    isAnimating,
    startAnimation,
    endAnimation
  }
}

/**
 * 页面进入动画
 * 为页面元素添加渐进式进入动画
 */
export function useStaggerAnimation(selector = '.stagger-item', options = {}) {
  const {
    delay = 100,
    stagger = 50,
    duration = 600
  } = options
  
  onMounted(() => {
    setTimeout(() => {
      const elements = document.querySelectorAll(selector)
      elements.forEach((el, index) => {
        setTimeout(() => {
          el.classList.add('stagger-active')
        }, index * stagger)
      })
    }, delay)
  })
}

